﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta http-equiv="Content-Language" content="en" />
		<meta name="Author" content="Sergey Serebryakov" />

		<link rel="stylesheet" href="css/main.css" type="text/css" />
        <link rel="stylesheet" href="css/editor.css" type="text/css" />
        <script type="text/javascript" src="js/editor.js"></script>
		<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
		<script type="text/javascript" src="js/jquery.form.js"></script>
        <script type="text/javascript" src="js/barbershop-1.0.js"></script>

		<title>
			Virtual Barbershop
		</title>
	</head>

	<body>
		<div id="main_div">
			<table width="100%" cellspacing="0" cellpadding="0">
				<tr><td class="header">
					<span class="header">Virtual Barbershop</span><br/>
                    <span class="subheader">upload your face | try on haircuts | go to the barbershop!</span>
					<div class="centered hr" style="margin-top: 20px;"></div>
				</td></tr>
				<tr><td class="content">
                    <form id="file_upload_form" action="vb?action=upload" method="post" enctype="multipart/form-data">
						<label for="imagefile_input">Your face:</label>
						<!-- TODO: Customize the upload field. http://www.quirksmode.org/dom/inputfile.html -->
						<input type="file" name="imagefile" id="imagefile_input" accept="image/jpeg" style="border: 1px solid black; width: 350px; font-family: Georgia; background-color: #FFFFFF;">
						<input type="submit" name="upload" value="Upload" style="border: 1px solid black; width: 150px; height: 40px; font-family: Georgia; cursor: pointer;" onclick="uploadButton_click();">
					</form>
					<span class="smallnote">Please note that your image size shouldn't exceed 5 megabytes</span>

					<div id="progress_div" class="centered visibilityhidden">
						<div id="progress_bar"></div>
						<div id="progress_percent">0%</div>
					</div>
					<div id="upload_status" class="centered"></div>
					
					Or, check <a href="#" name="main_to_collages" onclick="alreadyCreatedCollages_click(); return false;">already created collages</a>
				</td></tr>
				<tr><td class="footer">
					<div class="centered hr" style="margin-bottom: 20px;"></div>
					Made by VirtualBB team, 2012.<br />
				</td></tr>
			</table>
		</div>
		
		<div id="editor_div" class="displaynone">
			<table width="100%" cellspacing="0" cellpadding="0">
				<tr><td class="content">
					<table id="haircut_gallery_table" class="placeholder" width="100%">
                        <tr id="haircut_gallery_div"></tr>
                    </table>
				</td></tr>
				<tr><td class="content">
					<table width="100%" cellspacing="0" cellpadding="0">
						<tr>
							<td width="70%">
								<!-- <div id="editor_canvas_div" class="centered placeholder" style="width: 800px; height: 500px;"></div> -->
                                <div id="edapp">
                                    <div id="canvas" style="border: 1px solid black">
                                        <div style="width: 100%; height: 100%; z-index: -1; text-align: center;" classname="item selectNode unselectable" class="item selectNode unselectable" unselectable="on">
                                            <div id="editor_canvas_div" style="margin-left: auto; margin-right: auto;"></div>
                                            <div id="panel" style="display:none"></div>
                                        </div>
                                    </div>
                                </div>

							</td>
							<td class="leftalign">
                                Choose haircut from the gallery<br />
								or <a href="#" name="editor_to_main" onclick="switchTab('main_div'); return false;">use another picture</a>
                                <br /><br />
                                <div id="editor_bbinfo_block" class="visibilityhidden">
                                    <button style="border: 1px solid black; width: 150px; height: 40px;" onclick="publishButton_click(); return false; switchTab('collages_div'); return false;">Publish</button>
                                    <img id="ajax_loader_image" src="resources/ajax-loader.gif" width="25" height="25" class="visibilityhidden" style="position: relative; top: 4px; left: 8px;" />
                                    <br /><br />

                                    This haircut is available here:
								    <ul id="haircut_barbershops_ul" class="barbershops_ul">
								    </ul>
                                </div>
							</td>
						</tr>
					</table>
				</td></tr>
				<!-- <tr><td class="footer">
					<div class="centered hr" style="margin-bottom: 20px;"></div>
					VB team, 2012.<br />
				</td></tr> -->
			</table>
		</div>
		
		<div id="collages_div" class="displaynone">
			<table width="100%" cellspacing="0" cellpadding="0">
				<tr><td class="content">
                    <div id="collage_gallery_container" class="centered">
                        <table id="collage_gallery_table" class="placeholder" width="100%">
                            <tr id="collage_gallery_div"></tr>
                        </table>
                    </div>
				</td></tr>
				<tr><td class="content">
					<table width="100%" cellspacing="0" cellpadding="0">
						<tr>
							<td width="70%">
								<div id="large_collage_div" class="centered placeholder">
                                    <img id="large_collage_image" class="large_collage_image" height="400" src="" />
								</div>
							</td>
							<td class="leftalign">
                                <a href="#" name="collages_to_main" onclick="switchTab('main_div'); return false;">Create a new collage</a>
                                <br /><br />
                                This haircut is available here:
								<ul id="collage_barbershops_ul" class="barbershops_ul">
								</ul>
							</td>
						</tr>
					</table>
				</td></tr>
			</table>
		</div>
	</body>
</html>
